<!doctype html>
<html lang="zh-Hans">

<head>
    <meta charset="utf-8">
    <meta name="author" content="Fresns" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="generator" content="Bootstrap 5">
    <title>列表模块介绍</title>
    <link rel="stylesheet" href="../../assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../assets/css/bootstrap-icons.css">
    <link rel="stylesheet" href="../../assets/css/fresns.css">
</head>

<body>
    <!--页头-->
    <header>
        <div class="text-center mt-5"><img src="../../assets/images/fresns-icon.png" height="80"></div>
    </header>

    <div class="container-fluid mb-5">
        <div class="text-center my-5">
            <div class="text-center mt-3">
                <div class="btn-group">
                    <a href="member.html" class="btn btn-outline-primary active">样式</a>
                    <a href="../code/member.html" class="btn btn-outline-primary">结构</a>
                    <a href="../desc/member.html" class="btn btn-outline-primary">说明</a>
                </div>
            </div>
        </div>
        <ul class="nav nav-tabs justify-content-center">
            <li class="nav-item"><a class="nav-link" href="../index.html">首页</a></li>
            <li class="nav-item"><a class="nav-link active" href="member.html">成员列表</a></li>
            <li class="nav-item"><a class="nav-link" href="group.html">小组列表</a></li>
            <li class="nav-item"><a class="nav-link" href="hashtag.html">话题列表</a></li>
            <li class="nav-item"><a class="nav-link" href="post.html">帖子列表</a></li>
            <li class="nav-item"><a class="nav-link" href="comment.html">评论列表</a></li>
            <li class="nav-item"><a class="nav-link" href="extend.html">扩展内容模板</a></li>
            <li class="nav-item"><a class="nav-link" href="implant.html">植入内容模板</a></li>
        </ul>
    </div>
    
    <div class="lists-box clearfix">
        <h5>成员列表</h5>
        <div class="card">
            <!--模板 1-->
            <div class="d-flex mb-3">
                <div class="flex-shrink-0">
                    <a href="#">
                        <img src="../../assets/images/temp/avatar-decorate.png" alt="头像挂件" class="member-decorate">
                        <img src="../../assets/images/temp/jarvis.jpg" alt="头像" class="member-avatar rounded-circle">
                    </a>
                </div>
                <div class="flex-grow-1">
                    <div class="member-primary d-lg-flex">
                        <div class="member-info d-flex text-nowrap overflow-hidden">
                            <a href="#" class="member-link d-flex">
                                <div class="member-nickname text-nowrap overflow-hidden">Jarvis</div>
                                <div class="member-verified"><img src="../../assets/images/temp/verified-icon.png" alt="认证图标" data-bs-toggle="tooltip" data-bs-placement="top" title="认证描述，接口参数 verifiedDesc 内容"></div>
                                <div class="member-name text-secondary">@jarvis</div>
                            </a>
                            <div class="member-role d-flex">
                                <div class="member-role-icon"><img src="../../assets/images/temp/role.png" alt="主角色图标"></div>
                                <div class="member-role-name"><span class="badge rounded-pill">主角色名</span></div>
                            </div>
                        </div>
                        <div class="member-icon d-flex flex-wrap flex-lg-nowrap overflow-hidden my-2 my-lg-0">
                            <img src="../../assets/images/temp/member-icon.png" alt="成员图标">
                            <img src="../../assets/images/temp/member-icon.png" alt="成员图标">
                            <img src="../../assets/images/temp/member-icon.png" alt="成员图标">
                            <img src="../../assets/images/temp/member-icon.png" alt="成员图标">
                            <img src="../../assets/images/temp/member-icon.png" alt="成员图标">
                            <img src="../../assets/images/temp/member-icon.png" alt="成员图标">
                            <img src="../../assets/images/temp/member-icon.png" alt="成员图标">
                            <img src="../../assets/images/temp/member-icon.png" alt="成员图标">
                            <img src="../../assets/images/temp/member-icon.png" alt="成员图标">
                            <img src="../../assets/images/temp/member-icon.png" alt="成员图标">
                            <img src="../../assets/images/temp/member-icon.png" alt="成员图标">
                            <img src="../../assets/images/temp/member-icon.png" alt="成员图标">
                            <img src="../../assets/images/temp/member-icon.png" alt="成员图标">
                            <img src="../../assets/images/temp/member-icon.png" alt="成员图标">
                            <img src="../../assets/images/temp/member-icon.png" alt="成员图标">
                            <img src="../../assets/images/temp/member-icon.png" alt="成员图标">
                            <img src="../../assets/images/temp/member-icon.png" alt="成员图标">
                        </div>
                    </div>
                    <div class="member-secondary d-flex flex-wrap mb-1">
                        <p class="fs-7 mt-1 mb-2 pe-2 text-secondary">成员表 signature 字段内容，是成员的个性签名或者简单介绍内容。这个信息可能很长很长，是 varchar(255) 字段类型，可以输出很多字。</p>
                    </div>
                    <div class="interactive-btn">
                        <button type="button" class="btn btn-outline-success btn-sm active" data-bs-toggle="tooltip" data-bs-placement="top" title="取消点赞"><i class="bi bi-hand-thumbs-up"></i> 10w+</button>
                        <button type="button" class="btn btn-outline-success btn-sm active" data-bs-toggle="tooltip" data-bs-placement="top" title="取消关注"><i class="bi bi-person-check-fill"></i> 123</button>
                        <button type="button" class="btn btn-outline-success btn-sm active" data-bs-toggle="tooltip" data-bs-placement="top" title="取消加入黑名单"><i class="bi bi-x-octagon"></i></button>
                    </div>
                </div>
            </div>
            <hr class="dropdown-divider">
            <!--模板 2 用户昵称很长-->
            <div class="d-flex mb-3">
                <div class="flex-shrink-0">
                    <a href="#">
                        <img src="../../assets/images/temp/jarvis.jpg" alt="头像" class="member-avatar rounded-circle">
                    </a>
                </div>
                <div class="flex-grow-1">
                    <div class="member-primary d-lg-flex">
                        <div class="member-info d-flex text-nowrap overflow-hidden">
                            <a href="#" class="member-link d-flex">
                                <div class="member-nickname text-nowrap overflow-hidden">用户昵称用户昵称用户昵称用户昵称用户昵称用户昵称用户昵称</div>
                                <div class="member-verified"><img src="../../assets/images/temp/verified-icon.png" alt="认证图标" data-bs-toggle="tooltip" data-bs-placement="top" title="认证描述，接口参数 verifiedDesc 内容"></div>
                                <div class="member-name text-secondary">@jarvis.tangtangtangtangtang</div>
                            </a>
                            <div class="member-role d-flex">
                                <div class="member-role-icon"><img src="../../assets/images/temp/role.png" alt="主角色图标"></div>
                            </div>
                        </div>
                        <div class="member-icon d-flex flex-wrap flex-lg-nowrap overflow-hidden my-2 my-lg-0">
                            <img src="../../assets/images/temp/member-icon.png" alt="成员图标">
                            <img src="../../assets/images/temp/member-icon.png" alt="成员图标">
                            <img src="../../assets/images/temp/member-icon.png" alt="成员图标">
                            <img src="../../assets/images/temp/member-icon.png" alt="成员图标">
                            <img src="../../assets/images/temp/member-icon.png" alt="成员图标">
                            <img src="../../assets/images/temp/member-icon.png" alt="成员图标">
                            <img src="../../assets/images/temp/member-icon.png" alt="成员图标">
                            <img src="../../assets/images/temp/member-icon.png" alt="成员图标">
                            <img src="../../assets/images/temp/member-icon.png" alt="成员图标">
                            <img src="../../assets/images/temp/member-icon.png" alt="成员图标">
                            <img src="../../assets/images/temp/member-icon.png" alt="成员图标">
                            <img src="../../assets/images/temp/member-icon.png" alt="成员图标">
                            <img src="../../assets/images/temp/member-icon.png" alt="成员图标">
                            <img src="../../assets/images/temp/member-icon.png" alt="成员图标">
                            <img src="../../assets/images/temp/member-icon.png" alt="成员图标">
                            <img src="../../assets/images/temp/member-icon.png" alt="成员图标">
                            <img src="../../assets/images/temp/member-icon.png" alt="成员图标">
                        </div>
                    </div>
                    <div class="member-secondary d-flex flex-wrap mb-1">
                        <p class="fs-7 mt-1 mb-2 pe-2 text-secondary">成员表 signature 字段内容，是成员的个性签名或者简单介绍内容。这个信息可能很长很长，是 varchar(255) 字段类型，可以输出很多字。</p>
                    </div>
                    <div class="interactive-btn">
                        <button type="button" class="btn btn-outline-success btn-sm" data-bs-toggle="tooltip" data-bs-placement="top" title="点赞"><i class="bi bi-hand-thumbs-up"></i> 10w+</button>
                        <button type="button" class="btn btn-outline-success btn-sm" data-bs-toggle="tooltip" data-bs-placement="top" title="关注"><i class="bi bi-person-check-fill"></i> 123</button>
                        <button type="button" class="btn btn-outline-success btn-sm" data-bs-toggle="tooltip" data-bs-placement="top" title="加入黑名单"><i class="bi bi-x-octagon"></i></button>
                    </div>
                </div>
            </div>
            <hr class="dropdown-divider">
            <!--模板 3 信息很少-->
            <div class="d-flex mb-3">
                <div class="flex-shrink-0">
                    <a href="#">
                        <img src="../../assets/images/temp/jarvis.jpg" alt="头像" class="member-avatar rounded-circle">
                    </a>
                </div>
                <div class="flex-grow-1">
                    <div class="member-primary d-lg-flex">
                        <div class="member-info d-flex text-nowrap overflow-hidden">
                            <a href="#" class="member-link d-flex">
                                <div class="member-nickname text-nowrap overflow-hidden">唐杰</div>
                                <div class="member-name text-secondary">@tangjie</div>
                            </a>
                            <div class="member-role d-flex">
                                <div class="member-role-name"><span class="badge rounded-pill">管理员</span></div>
                            </div>
                        </div>
                    </div>
                    <div class="member-secondary d-flex flex-wrap mb-1">
                        <p class="fs-7 mt-1 mb-2 pe-2 text-secondary">成员表 signature 字段内容，是成员的个性签名或者简单介绍内容。这个信息可能很长很长，是 varchar(255) 字段类型，可以输出很多字。</p>
                    </div>
                    <div class="interactive-btn">
                        <button type="button" class="btn btn-outline-success btn-sm" data-bs-toggle="tooltip" data-bs-placement="top" title="点赞"><i class="bi bi-hand-thumbs-up"></i> 10w+</button>
                        <button type="button" class="btn btn-outline-success btn-sm" data-bs-toggle="tooltip" data-bs-placement="top" title="关注"><i class="bi bi-person-check-fill"></i> 123</button>
                        <button type="button" class="btn btn-outline-success btn-sm" data-bs-toggle="tooltip" data-bs-placement="top" title="加入黑名单"><i class="bi bi-x-octagon"></i></button>
                    </div>
                </div>
            </div>
            <!--模板 结束-->
        </div>
        <h5 class="mt-5">帖子作者信息</h5>
        <div class="card">
            <!--丰富信息-->
            <div class="d-flex">
                <div class="flex-shrink-0">
                    <a href="#">
                        <img src="../../assets/images/temp/avatar-decorate.png" alt="头像挂件" class="member-decorate">
                        <img src="../../assets/images/temp/jarvis.jpg" alt="头像" class="member-avatar rounded-circle">
                    </a>
                </div>
                <div class="flex-grow-1">
                    <div class="member-primary d-lg-flex">
                        <div class="member-info d-flex text-nowrap overflow-hidden">
                            <a href="#" class="member-link d-flex">
                                <div class="member-nickname text-nowrap overflow-hidden">Jarvis</div>
                                <div class="member-verified"><img src="../../assets/images/temp/verified-icon.png" alt="认证图标" data-bs-toggle="tooltip" data-bs-placement="top" title="认证描述，接口参数 verifiedDesc 内容"></div>
                                <div class="member-name text-secondary">@jarvis</div>
                            </a>
                            <div class="member-role d-flex">
                                <div class="member-role-icon"><img src="../../assets/images/temp/role.png" alt="主角色图标"></div>
                                <div class="member-role-name"><span class="badge rounded-pill">主角色名</span></div>
                            </div>
                        </div>
                        <div class="member-icon d-flex flex-wrap flex-lg-nowrap overflow-hidden my-2 my-lg-0">
                            <img src="../../assets/images/temp/member-icon.png" alt="成员图标">
                            <img src="../../assets/images/temp/member-icon.png" alt="成员图标">
                            <img src="../../assets/images/temp/member-icon.png" alt="成员图标">
                            <img src="../../assets/images/temp/member-icon.png" alt="成员图标">
                            <img src="../../assets/images/temp/member-icon.png" alt="成员图标">
                            <img src="../../assets/images/temp/member-icon.png" alt="成员图标">
                            <img src="../../assets/images/temp/member-icon.png" alt="成员图标">
                            <img src="../../assets/images/temp/member-icon.png" alt="成员图标">
                            <img src="../../assets/images/temp/member-icon.png" alt="成员图标">
                            <img src="../../assets/images/temp/member-icon.png" alt="成员图标">
                            <img src="../../assets/images/temp/member-icon.png" alt="成员图标">
                            <img src="../../assets/images/temp/member-icon.png" alt="成员图标">
                            <img src="../../assets/images/temp/member-icon.png" alt="成员图标">
                            <img src="../../assets/images/temp/member-icon.png" alt="成员图标">
                            <img src="../../assets/images/temp/member-icon.png" alt="成员图标">
                            <img src="../../assets/images/temp/member-icon.png" alt="成员图标">
                            <img src="../../assets/images/temp/member-icon.png" alt="成员图标">
                        </div>
                    </div>
                    <div class="member-secondary d-flex flex-wrap mb-1">
                        <div class="text-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="2021-03-01 12:30:21">12分钟前</div>
                        <a href="#" class="link-secondary ms-2"><i class="bi bi-geo-alt-fill"></i>上海虹桥国际机场</a>
                    </div>
                </div>
            </div>
            <!--无挂件无图标无角色，带角色颜色-->
            <div class="d-flex">
                <div class="flex-shrink-0">
                    <a href="#">
                        <img src="../../assets/images/temp/jarvis.jpg" alt="头像" class="member-avatar rounded-circle">
                    </a>
                </div>
                <div class="flex-grow-1">
                    <div class="member-primary d-lg-flex">
                        <div class="member-info d-flex text-nowrap overflow-hidden">
                            <a href="#" class="member-link d-flex">
                                <div class="member-nickname text-nowrap overflow-hidden" style="color:#F40;">Jarvis</div>
                                <div class="member-name text-secondary">@jarvis</div>
                            </a>
                        </div>
                    </div>
                    <div class="member-secondary d-flex flex-wrap mb-1">
                        <div class="text-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="2021-03-01 12:30:21">12分钟前</div>
                    </div>
                </div>
            </div>
            <!--匿名者-->
            <div class="d-flex">
                <div class="flex-shrink-0">
                    <img src="../../assets/images/temp/anonymous.jpg" alt="头像" class="member-avatar rounded-circle">
                </div>
                <div class="flex-grow-1">
                    <div class="member-primary d-lg-flex">
                        <div class="member-info d-flex text-nowrap overflow-hidden">
                            <div class="text-muted">匿名者</div>
                        </div>
                    </div>
                    <div class="member-secondary d-flex flex-wrap mb-1">
                        <div class="text-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="2021-03-01 12:30:21">12分钟前</div>
                        <a href="#" class="link-secondary ms-2"><i class="bi bi-geo-alt-fill"></i>上海虹桥国际机场</a>
                    </div>
                </div>
            </div>
            <!--账号已注销-->
            <div class="d-flex">
                <div class="flex-shrink-0">
                    <img src="../../assets/images/temp/deleted.jpg" alt="头像" class="member-avatar rounded-circle">
                </div>
                <div class="flex-grow-1">
                    <div class="member-primary d-lg-flex">
                        <div class="member-info d-flex text-nowrap overflow-hidden">
                            <div class="text-muted">账号已注销</div>
                        </div>
                    </div>
                    <div class="member-secondary d-flex flex-wrap mb-1">
                        <div class="text-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="2021-03-01 12:30:21">12分钟前</div>
                    </div>
                </div>
            </div>
            <!--模板 结束-->
        </div>
    </div>
    
    <footer class="text-center" style="margin-top:100px;">
        <div><img src="../../assets/images/fresns-logo.png" height="30"></div>
        <p class="mt-3 mb-5"><a href="https://tangjie.me" target="_blank">唐杰出品</a></p>
    </footer>

    <script src="../../assets/javascript/bootstrap.bundle.min.js"></script>
    <script src="../../assets/javascript/fresns.js"></script>
</body>

</html>